import React, { useState, useEffect } from "react";
import { Search, Tabbar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Cart, WapHomeO, Bars, Manager } from "@react-vant/icons";
import { homes } from "../api/home";
import autos from "../views/auto.module.css";
import { Swiper, Toast } from "antd-mobile";
import imgs from "../assets/F1DF18154E54FBEDCBEF307E3777AC11.jpg";
const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];
const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className={autos.content}
      style={{ background: color }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`);
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
));
export default function About(props) {
  const [value, setValue] = useState(""); //搜索框
  const [app, setApp] = useState(null); //轮播图
  const [classify, setShopp] = useState(null); //分类
  const [array, setArray] = useState(null); //商品列表
  let navigate = useNavigate();
  // 请求首页信息
  useEffect(() => {
    homes().then((res) => {
      console.log(res, "首页信息");
      setApp(res.data);
      setShopp(res.data);
      setArray(res.data);
    });
  }, []);

  const handleImageError = (event) => {
    event.target.onerror = null;
    event.target.src = imgs;
  };
  function details(data) {
    navigate("/details", {
      replace: false,
      state: {
        id: data.id,
      },
    });
  }
  // // 跳转到分类页面
  // function Qaxonomi() {
  //   navigate("/Qaxonomi");
  // }
  // // 跳转到购物车页面
  // function Shopping_art() {
  //   navigate("/ShoppingCart");
  // }
  function jump(targetPage) {
    navigate(targetPage)
}
  return (
    <div>
      {/* 搜索框 */}
      <Search
        shape="round"
        background="#FFFFFF"
        border="#E0AF75 1px soild"
        value={value}
        onChange={setValue}
        placeholder="请输入搜索关键词"
      />

      {/* 轮播图 */}
      <Swiper
        className={autos.banner}
        loop
        autoplay
        onIndexChange={(i) => {
          console.log(i, "onIndexChange1");
        }}
      >
        {app?.banner.map((item) => (
          <Swiper.Item key={item}>
            <img src={item.imgs} alt="" />
          </Swiper.Item>
        ))}
      </Swiper>

      {/* 商品分类 */}
      <div className={autos.home_shop}>
        <div className={autos.home_shop_one}>
          {classify?.types.map((indexs, index) => (
            <div
              key={indexs}
              className={autos.home_shop_one1}
              style={{ display: index > 7 ? "none" : "block" }}
            >
              <img
                style={{ width: "45px", height: "45px", borderRadius: "10px" }}
                src={indexs.imgs}
                alt=""
                onError={handleImageError}
              />
              <p>{indexs.name}</p>
            </div>
          ))}
        </div>
      </div>

      {/* 商品列表 */}
      <div className={autos.scroll}>
        {array?.goods.map((item, index) => (
          <div
            className={autos.scrollChild}
            onClick={() => {
              details(item);
            }}
          >
            <img
              src={item.imgs}
              alt=""
              className={autos.imge}
              onError={handleImageError}
            />
            <div>{item.name}</div>
            <div className={autos.constadd}>
              ￥{item.price}
              <button className={autos.add}>+</button>
            </div>
          </div>
        ))}
        <div></div>
      </div>
      {/* 底部导航栏 */}
      <Tabbar activeColor='blue' inactiveColor='#000000' defaultValue='personage' className={autos.footer}>
                <Tabbar.Item icon={<WapHomeO />} onClick={() => jump('/Home')} name='Home'>首页</Tabbar.Item>
                <Tabbar.Item icon={<Bars />} onClick={() => jump('/Qaxonomi')} name='Qaxonomi'>分类</Tabbar.Item>
                <Tabbar.Item icon={<Cart />} onClick={() => jump('/ShoppingCart')} name='ShoppingCart'>购物车</Tabbar.Item>
                <Tabbar.Item icon={<Manager />} name='Customers' onClick={() => jump('/Customers')}>我的</Tabbar.Item>
            </Tabbar>
      
    </div>
  );
}
